<template>
  <el-dialog
    @close="close"
    width="50%"
    title="设置角色"
    :visible.sync="dialogFormVisible"
  >
    <el-form label-width="80px">
      <el-form-item label="用户名">
        <el-input disabled size="normal" :value="assign.username"></el-input>
      </el-form-item>
      <el-form-item label="角色列表">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="isSelectAssignList"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="item in allAssign"
            :label="item.id"
            :key="item.id"
            >{{ item.roleName }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSave">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import userApi from "@/api/mine/user";
import { Message } from "element-ui";

export default {
  name: "Vue2UserModel",
  data() {
    return {
      dialogFormVisible: false,
      assign: {},
      // 所有角色
      allAssign: [],
      //   选中的角色
      isSelectAssignList: [],
      // 全选状态
      checkAll: false,
      isIndeterminate: true,
    };
  },

  mounted() {},
  methods: {
    // 获取角色列表
    async reqAssignList() {
      try {
        let { data } = await userApi.reqAssignList(this.assign.id);
        this.isSelectAssignList = data.assignRoles.map((item) => item.id);
        this.allAssign = data.allRolesList;
      } catch (error) {
        console.log(error);
      }
    },
    handleCheckAllChange(val) {
      let allAssign = this.allAssign.map((item) => item.id);
      this.isSelectAssignList = val ? allAssign : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.allAssign.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.allAssign.length;
    },
    // 关闭添加juese框
    close() {
      this.allAssign = [];
      this.isSelectAssignList = [];
    },
    // 保存
    async onSave() {
      try {
        await userApi.setAssigin(this.assign.id, this.isSelectAssignList);
        Message.success("保存成功");
        this.$bus.$emit("getUserList");
        this.dialogFormVisible = false;
      } catch (error) {
        Message.error(error);
      }
    },
  },
  computed: {
    // 已选中的
    roleList: {
      get() {
        let { isSelectAssignList, allAssign } = this;
        return allAssign.map((item) => {
          return {
            ...item,
            isSelect: isSelectAssignList.includes(item.id),
          };
        });
      },
      set() {},
    },
  },
  watch: {
    assign(n, o) {
      this.reqAssignList();
    },
    checkedCities(n) {
      console.log(n);
    },
  },
};
</script>

<style lang="scss" scoped></style>
